<template>
  <el-pagination
    class="margin-t-20"
    :current-page="page.current"
    :page-size="page.size"
    :total="page.total"
    layout="total, sizes, prev, pager, next, jumper"
    :page-sizes="[10, 20, 50, 100]"
    @size-change="(size) => searchHandler(null, size)"
    @current-change="(current) => searchHandler(current)"
  />
</template>
<script>
export default {
  name: 'TablePage',
  props: {
    page: {
      type: Object,
      required: true,
    },
    search: {
      type: Function,
      required: true,
    },
  },
  methods: {
    searchHandler(current, size) {
      if (current) this.page.current = current
      if (size) this.page.size = size

      this.search()
    },
  },
}
</script>
